<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选详情页</title>
    <link rel="stylesheet" href="./css/cart.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <style>
        .swiper-container {
            width: 282px;
            height: 282px;
        }
    </style>
</head>

<body>
    <div class="main-box">
        <!-- 头部区域 -->

        <header>
            <div class="wpr">
                <section class="logo">
                    <a href="#" title="返回首页" onclick="homepage()">
                        <img src="./img/icon.png" alt="">
                        <div class="right">
                            <h3>熊猫优选</h3>
                            <span>XIONG MAO YOU XUAN</span>
                        </div>
                    </a>
                </section>
                <section class="wpr_seh">
                    <div class="sch">
                        <input type="text" placeholder="收索商品，发现跟多优惠">
                        <div class="btn">收索</div>
                    </div>
                </section>
                <section class="ate">
                    <ul>
                        <li>
                            <img src="./img/logo1.png" alt="">
                            <span>全程包邮</span>
                        </li>
                        <li>
                            <img src="./img/logo2.png" alt="">
                            <span>7天退货</span>
                        </li>
                        <li>
                            <img src="./img/logo3.png" alt="">
                            <span>品质保证</span>
                        </li>
                    </ul>
                </section>
            </div>
        </header>
        <!-- 导航栏区域 -->
        <div class="tab">
            <ul>
                <li class="bn" onclick="homepage()">首页</li>
                <!-- <li>9块9包邮</li>
                <li>超值大额卷</li>
                <li>夏季女装上新</li> -->
            </ul>
        </div>
        <!-- 主要内容区域 -->
        <div class="pc-v">
            <!-- 第一个板块 -->
            <div class="cmt-a">
                <!-- 轮播图 -->
                <div class="pts">
                    <!-- <div class="swiper-container"> -->
                    <!-- <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="./img/lunbo.jpeg" alt=""></div>
                            <div class="swiper-slide"><img src="./img/lunbo.jpeg" alt=""></div>
                            <div class="swiper-slide"><img src="./img/lunbo.jpeg" alt=""></div>
                        </div> -->
                    <!-- 如果需要分页器 -->
                    <!-- <div class="swiper-pagination"></div> -->

                    <!-- 如果需要导航按钮 -->
                    <!-- <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div> -->
                    <!-- </div> -->
                    <script src="" type="text/html" id="lunBo">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                {{each photo}}
                                    <div class="swiper-slide"><img src="{{$value.url}}" alt=""></div>
                                {{/each}}
                            </div>
                            <!-- 如果需要分页器 -->
                            <div class="swiper-pagination"></div>

                            <!-- 如果需要导航按钮 -->
                            <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                        </div>
                        <script>
                            var mySwiper = new Swiper('.swiper-container', {
                                autoplay: true,
                                loop: true, // 循环模式选项
                    
                                // 如果需要分页器
                                pagination: {
                                    el: '.swiper-pagination',
                                },
                    
                                // 如果需要前进后退按钮
                                navigation: {
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                    el: '.swiper-scrollbar',
                                },
                    
                                // 如果需要滚动条
                                // scrollbar: {
                                //     el: '.swiper-scrollbar',
                                // },
                            })
                        </script>
                        
                    </script>
                </div>
                <div class="can">
                    <!-- <h1 class="can-a">
                        <div class="can-aa">
                            <img src="./img/taobao.png" alt="" class="can-img-a">
                            <img src="./img/baoyou.png" alt="" class="can-img-b">
                        </div>
                        菠萝吐司夹心面包整箱早餐食品休闲懒人速食夜宵充饥零食小吃
                    </h1>
                    <div class="can-b">
                        <p class="can-ba">原价￥11.9</p>
                        <div class="can-bb">
                            <span>卷后价:</span><span class="can-pic"><span class="can-tag">￥</span>6<span
                                    class="can-dgt">.9</span></span>
                            <span class="can-in">5元券</span>
                            <span class="can-num">1627人已买</span>
                        </div>
                    </div>

                    <div class="can-c">
                        <span>优惠有效期：2021-09-07</span>
                    </div>
                    <button class="can-btn">领卷购买</button> -->
                    <script src="" type="text/html" id="can-t">
                        <h1 class="can-a">
                            <div class="can-aa">
                                <img src="./img/taobao.png" alt="" class="can-img-a">
                                <img src="./img/baoyou.png" alt="" class="can-img-b">
                            </div>
                            {{cst.title}}
                        </h1>
                        <div class="can-b">
                            <p class="can-ba">原价￥{{cst.originPrice}}</p>
                            <div class="can-bb">
                                <span>卷后价:</span><span class="can-pic"><span class="can-tag">￥</span>{{cst.price}}<span class="can-dgt"></span></span>
                                <span class="can-in">{{cst.couponValue}}</span>
                                <span class="can-num">{{cst.saleNum}}人已买</span>
                            </div>
                        </div>
    
                        <div class="can-c">
                            <span>优惠有效期：{{cst.expireDate}}</span>
                        </div>
                        <button class="can-btn" onclick="onShopping({{cst.id}})">点击购买</button>
                    
                    </script>

                </div>
            </div>
            <!-- 第二个板块 -->
            <div class="cmt-b">
                <!-- <div class="cmt_a1">
                    <span class="line"></span>
                    <span class="txt">买家信息</span>
                    <span class="line"></span>
                </div>
                <img src="./img/shop.png" alt="" class="shop-logo">
                <p class="shop-name">昕炯食品专营店</p>
                <div class="cmt_a2">
                    <ul class="cter">
                        <li>描述</li>
                        <li>服务</li>
                        <li>物流</li>
                    </ul>
                    <ul class="sre">
                        <li>4.8</li>
                        <li>4.8</li>
                        <li>4.8</li>
                    </ul>
                </div> -->
                <script src="" type="text/html" id="cp">
                    <div class="cmt_a1">
                        <span class="line"></span>
                        <span class="txt">卖家信息</span>
                        <span class="line"></span>
                    </div>
                    <img src="{{cart.coverUrl}}" alt="" class="shop-logo">
                    <p class="shop-name">{{cart.nickname}}</p>
                    <div class="cmt_a2">
                        <ul class="cter">
                            <li>描述</li>
                            <li>服务</li>
                            <li>物流</li>
                        </ul>
                        <ul class="sre">
                            <li>{{cart.deliveryScore}}</li>
                            <li>{{cart.itemScore}}</li>
                            <li>{{cart.serviceScore}}</li>
                        </ul>
                    </div>
                </script>
            </div>
            <!-- 第三个板块 -->
            <div class="cmt-c">
                <div class="imgs">
                    <!-- <img src="./img/shops.jpg" alt="">
                    <img src="./img/shops.jpg" alt="">
                    <img src="./img/shops.jpg" alt="">
                    <img src="./img/shops.jpg" alt="">
                    <img src="./img/shops.jpg" alt="">
                    <img src="./img/shops.jpg" alt="">
                    <img src="./img/shops.jpg" alt="">
                    <img src="./img/shops.jpg" alt="">
                    <img src="./img/shops.jpg" alt="">
                    <img src="./img/shops.jpg" alt=""> -->
                    <script src="" type="text/html" id="imeGs">
                        {{each src}}
                        <img src="{{src[$index].url}}" alt="">
                        {{/each}}
                    </script>
                </div>
            </div>
        </div>




        <!-- 返回顶部区域 -->
        <div class="D-top">
            <img src="./img/top.png" alt="">
        </div>
        <!-- 页脚 -->
        <footer>
            <div class="ctr">
                <img src="./img/icon.png" alt="">
                <div class="ctr-a">
                    <h1>熊猫优选</h1>
                    <p class="sgn">
                        年轻人网购首选
                        <br />
                        购物领卷更省钱
                    </p>
                </div>
                <div class="ctr-b">
                    <p class="me">
                        <span>|</span>
                        <a href="#">下载App</a>
                    </p>
                </div>
                <div class="ctr-c">
                    <img src="./img/policeIcon.png" alt="">
                    <p class="ms">
                        <span>浙公安网备案 33010602009949号 | </span>
                        ICP备案号：
                        <a href="#">ICP备案号: 浙ICP备17012864号-1</a>
                        |
                    </p>
                    <img src="./img/license.png" alt="">
                    <p class="ms">证照信息</p>
                </div>
            </div>
        </footer>
        <div class="fter">
            <img src="./img/aqkx_83x30.png" alt="">
        </div>
    </div>

    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./js/template-web.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/cart.js"></script>
    
</body>

</html>